<template>
  <el-dialog
    title="报销申请"
    :visible.sync="dialog.show"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    v-alterELDialogMarginTop="{marginTop:'5vh'}"
  >
    <div class="form-container">
      <el-form :model="baoXiao" ref="childForm" label-width="130px" :rules="rules" label-position="left">

        <el-form-item label="用途" prop="yongTu">
          <el-input v-model="baoXiao.yongTu"></el-input>
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker
            style="width: 100%"
            v-model="baoXiao.riQi"
            type="date">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="支付方式" prop="zhiFuFangShi">
          <el-input v-model="baoXiao.zhiFuFangShi"></el-input>
        </el-form-item>

        <el-form-item prop="houFuPiaoJuZhangShu" label="后附票据张数">
          <el-input-number v-model="baoXiao.houFuPiaoJuZhangShu" :min="1" :max="100"></el-input-number>
        </el-form-item>

        <el-form-item label="报销金额(大写)" prop="baoXiaoJinEr">
          <el-input v-model="baoXiao.baoXiaoJinEr"></el-input>
        </el-form-item>

        <el-form-item label="报销金额(小写)" prop="baoXiaoJinEXiaoXie">
          <el-input v-model="baoXiao.baoXiaoJinEXiaoXie"></el-input>
        </el-form-item>

        <el-form-item label="情况说明" prop="qingKuangShuoMing">
          <el-input type="textarea" :rows="3" v-model="baoXiao.qingKuangShuoMing"></el-input>
        </el-form-item>

        <el-form-item label="经办人意见" prop="jingBanRenYiJian">
          <el-input type="textarea" :rows="3" v-model="baoXiao.jingBanRenYiJian"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="beizhu">
          <el-input type="textarea" :rows="3" v-model="baoXiao.beizhu"></el-input>
        </el-form-item>

        <el-form-item label="相关附件">
          <el-upload
            class="upload-demo"
            action="http://192.168.0.102:8002/api/fileUpload/upload?fileType=BaoXiaoFile"
            multiple
            :limit="10"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            :file-list="uploadFileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">文件大小请勿超过2MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="审批人" style="margin-bottom: 0;" prop="auditorIdList">
          <el-select placeholder="添加审批人" v-model="baoXiao.auditorIdList" multiple>
            <template slot="prefix">
              <svg-icon icon-class="add-person" class-name="icon"></svg-icon>
            </template>
            <el-option v-for="item in userList" :key="item.value" :value="item.value"
                       :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <p class="tip">审批顺序依照人员选择顺序</p>
      </el-form>
    </div>
    <div slot="footer">
      <el-button type="default" @click="close">取 消</el-button>
      <el-button type="danger" @click="resetForm">重 置</el-button>
      <el-button
        type="success"
        @click="submitForm"plain
        :loading="dialog.changeLoading">保 存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import userAPI from '@/api/system/user'
  // import oaTemplateAPI from '@/api/system/oaTemplate'
  // import draggable from 'vuedraggable'
  // import departmentAPI from '@/api/system/department'
  import baoXiaoAPI from '@/api/baoXiao/baoXiao'
  import { mapGetters } from 'vuex'

  export default {
    name: 'BaoXiaoSave',
    data() {
      return {
        baoXiao: {
          auditorIdList: [],
          baoXiaoJinEXiaoXie: "",
          baoXiaoJinEr: "",
          beizhu: "",
          docTitle: "",
          fileList: [],
          houFuPiaoJuZhangShu: 0,
          jingBanRenYiJian: "",
          qingKuangShuoMing: "",
          riQi: new Date(),
          yongTu: "",
          zhiFuFangShi: ""
        },
        rules: {
          yongTu: [
            { required: true, message: '请输入用途', trigger: 'blur' }
          ],
          baoXiaoJinEr: [
            { required: true, message: '请输入报销金额大写', trigger: 'blur' },
          ],
          baoXiaoJinEXiaoXie: [
            { required: true, message: '请输入报销金额小写', trigger: 'blur' },
          ],
          qingKuangShuoMing: [
            { required: true, message: '请输入情况说明', trigger: 'blur' },
          ],
          auditorIdList: [
            { required: true, message: '请选择审批人', trigger: 'change' }
          ]

        },

        userList: [],
/*        departmentList: [],
isShowDialog: false,
        changeLoading: false,
        yinType: [
          { value: '公司公章', label: '公司公章' },
          { value: '公司合同章', label: '公司合同章' },
          { value: '其他', label: '其他' }
        ],
        shenPiTemplateList: [],
        draggableUserList: [],
        showUserList:false,*/
        uploadFileList:[],
        dialog:{
          show:false,
          changeLoading:false
        }
      }
    },
    computed: {
      ...mapGetters([
        'userId',
        'userNickname'
      ])
    },
    created() {
      this.getUserList()
      // this.getUserList()
      // 拉取审批模板list
      // this.getShenPiTemplateList()
      // this.getDepartmentList()
    },
    methods: {
/*      getDepartmentList(){
        departmentAPI.getSelectList().then(res=>{
          console.log(res)
          this.departmentList = res.result
        })
      },
      addPerson() {

      },
      getShenPiTemplateList() {
        oaTemplateAPI.getReceiptDocumentTemplateList().then(res => {
          this.shenPiTemplateList = res.result
        }).catch(err => {
          console.log(err)
        })
      },
      shenPiChange(val) {
        const el = this.getObjectByKey(val, this.shenPiTemplateList)
        this.draggableUserList = JSON.parse(JSON.stringify(el.userList))
      },
      removePerson(val) {
        for (let i in this.draggableUserList) {
          if (this.draggableUserList[i].value === val) {
            this.draggableUserList.splice(i, 1)
          }
        }
      },
      getObjectByKey(objectKey, arr) {
        for (const el of arr) {
          if (el.tid === objectKey) {
            return el
          }
        }
      },*/
      close() {
        /*this.resetForm()*/
        this.dialog.show = false
      },
      getUserList() {
        userAPI.getSelectList('').then(res => {
          this.userList = res.result
        })
      },
      saveOrUpdate() {
        this.dialog.changeLoading = true
        const promise = this.baoXiao.baoXiaoId ? baoXiaoAPI.edit(this.baoXiao) : baoXiaoAPI.save(this.baoXiao)
        promise.then(res => {
          this.dialog.changeLoading = false
          this.$message.success('保存成功')
          this.$emit('update')
          this.dialog.show = false
          this.resetForm()
        })

      },
      beforeClose(done) {
        this.resetForm()
        done(true)
      },

      open(id) {
        this.dialog.show = true
        if(id){
          baoXiaoAPI.getById(id).then(res=>{
            this.baoXiao = res
            for(let val of this.baoXiao.fileList){
              this.uploadFileList.push({
                name:val.fileName,
                fileId:val.fileId
              })
            }
          })
        }
      },
      resetForm() {
        this.$refs['childForm'].resetFields()
        this.baoXiao.riQi = new Date()
        this.baoXiao.houFuPiaoJuZhangShu = 1
        this.baoXiao.fileList = []
        this.uploadFileList = []
      },
      submitForm() {
        this.$refs['childForm'].validate(valid => {
          if (valid && !this.dialog.changeLoading) {
            this.saveOrUpdate()
          }
        })
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.info('文件大小请勿超过 2MB!')
        }
        return isLt2M
      },
      uploadSuccess(res, file){
        this.baoXiao.fileList.push(res.result)
      },
      handleRemove(file){
        const fileId = file.fileId
        for(let i in this.baoXiao.fileList){
          const el = this.baoXiao.fileList[i]
          if(el.fileId === fileId){
            this.baoXiao.fileList.splice(i,1)
          }
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .list-move {
    transition: transform 0.3s linear;
  }

  .icon {
    font-size: 20px;
    /*background-color: #F5F7FA;*/
    /*cursor: pointer;
    transition: transform 0.3s;*/

    /*&:hover {
      transform: scale(1.1);
    }*/
  }

  .row-1 {
    margin-bottom: 20px;
  }

  .user-list-container {
    border: 1px solid #e0e0e0;

    li {
      line-height: 40px;
      border-bottom: 1px dashed #eee;
      display: flex;
      justify-content: space-between;
      user-select: none;
      cursor: move;
      padding: 0 10px;

      &:hover {
        background-color: #f3f3f3;
      }

      p:first-of-type {
        i {
          margin-right: 10px;
          vertical-align: middle;
        }

        span {
          vertical-align: middle;
        }
      }

      p:last-of-type {
        i {
          vertical-align: middle;
        }
      }
    }
  }

  .tip {
    font-size: 13px;
    color:gray;
    padding-left: 80px;
    text-align: right;
    margin-top: 20px;
  }

</style>
